<template>
  <div class="yanlian">
    <div class="btns">
      <div
        class="btn"
        @click="handleBtnClick(1)"
        :class="{ active: btnIndex == 1 }"
      ></div>
      <div
        class="btn"
        @click="handleBtnClick(2)"
        :class="{ active: btnIndex == 2 }"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const btnIndex = ref(0);
const handleBtnClick = (index) => {
  btnIndex.value = index;
  router.push({
    path: "/choose",
    query: {
      type: index,
    },
  });
};
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.yanlian {
  width: 1920px;
  height: 1080px;
  //   background: url(./assets/shouye.jpg) no-repeat top center / 100%;
  .btns {
    width: 100%;
    height: 100%;
    position: relative;
    .btn {
      width: 450px;
      height: 240px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      &:first-child {
        left: 25%;
        background: url(./assets/project-choose.png) no-repeat top center / 100%;
      }
      &:last-child {
        right: 25%;
        background: url(./assets/area-choose.png) no-repeat top center / 100%;
      }
      &.active {
        &:first-child {
          left: 25%;
          background: url(./assets/shouye-01dianji.png) no-repeat top center /
            100%;
        }
        &:last-child {
          right: 25%;
          background: url(./assets/shouye-02dianji.png) no-repeat top center /
            100%;
        }
      }
    }
  }
}
</style>
